<template>
    <div>
        <h2 class="h2"><span>伤残立功信息表</span></h2>
        <div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="160px" class="demo-ruleForm information" id="information" accept-charset="UTF-8">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item class="select2" label="身体残疾情况：" prop="C001">
                            <el-select v-model="ruleForm.C001" placeholder="请选择身体残疾情况">
                                <el-option label="残疾军人" value="残疾军人"></el-option>
                                <el-option label="社会残疾人" value="社会残疾人"></el-option>   
                            </el-select>  
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                         <el-form-item label="是否享受残疾人两项补贴：" prop="C002">
                            <el-radio-group v-model="ruleForm.C002">
                                <el-radio label="有"></el-radio>
                                <el-radio label="无"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item class="select2" label="伤残等级：" prop="C003">
                            <el-select v-model="ruleForm.C003" placeholder="请选择伤残等级">
                                <el-option label="一级" value="一级"></el-option>
                                <el-option label="二级" value="二级"></el-option>   
                                <el-option label="三级" value="三级"></el-option>
                                <el-option label="四级" value="四级"></el-option>   
                                <el-option label="五级" value="五级"></el-option>
                                <el-option label="六级" value="六级"></el-option>   
                                <el-option label="七级" value="七级"></el-option>
                                <el-option label="八级" value="八级"></el-option> 
                                <el-option label="九级" value="九级"></el-option>
                                <el-option label="十级" value="十级"></el-option>   
                            </el-select>  
                        </el-form-item>           
                    </el-col>
                    <el-col :span="12">
                        <el-form-item class="select2" label="伤残性质：" prop="C011">
                            <el-select v-model="ruleForm.C011" placeholder="请选择伤残性质">
                                <el-option label="因战" value="因战"></el-option>
                                <el-option label="因公" value="因公"></el-option>   
                                <el-option label="因病" value="因病"></el-option> 
                            </el-select>  
                        </el-form-item>           
                    </el-col>
                </el-row> 
                <el-row :gutter="20">
                    <el-col :span="12">    
                         <el-form-item class="select2" label="伤残证件名称：" prop="C004">
                            <el-select v-model="ruleForm.C004" placeholder="请选择伤残证件名称">
                                <el-option label="中华人民共和国残疾军人证" value="中华人民共和国残疾军人证"></el-option>
                                <el-option label="伤残民兵民工证" value="伤残民兵民工证"></el-option>   
                                <el-option label="因站因公和国因战因公伤残人员证" value="因站因公和国因战因公伤残人员证"></el-option> 
                            </el-select>  
                        </el-form-item>    
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="伤残证件号码：" prop="C005">
                            <el-input v-model="ruleForm.C005" id="C005" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                   <el-col :span="12">
                         <el-form-item label="是否因精神病评残：" prop="C007">
                            <el-radio-group v-model="ruleForm.C007">
                                <el-radio label="是"></el-radio>
                                <el-radio label="否"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item class="select2" label="立功受奖情况：" prop="C008">
                            <el-select v-model="ruleForm.C008" placeholder="请选择伤残等级">
                                <el-option label="八一勋章" value="八一勋章"></el-option>
                                <el-option label="大军区以上荣誉称号" value="大军区以上荣誉称号"></el-option>   
                                <el-option label="一等功" value="一等功"></el-option>
                                <el-option label="二等功" value="二等功"></el-option>   
                                <el-option label="三等功" value="三等功"></el-option>
                                <el-option label="全国士官优秀人才奖" value="全国士官优秀人才奖"></el-option>   
                                <el-option label="无" value="无"></el-option>
                            </el-select>  
                        </el-form-item>     
                    </el-col>
                </el-row>
                <!-- <el-row :gutter="20">
                    <el-col :span="24">
                        
                    </el-col>
                </el-row> -->
                <el-row :gutter="20">
                    <el-col :span="4" style="text-align:right;">立功受奖证件：</el-col>
                    <el-col :span="20">
                        <el-upload
                            action="https://jsonplaceholder.typicode.com/posts/"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                            name="C009"
                            :before-upload="beforeupload"
                            :file-list="ruleForm.C009"
                            :on-success="imgSuccess"
                        >
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item>
                        <el-button type="primary" @click="fallbackFn()">上一步</el-button>
                        <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import interface_s from '@/api/api.js'
export default {
    data(){
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            ruleForm: { //默认数据
                C001:'', //身体残疾情况
                C002:'',//是否享受残疾人两项补贴
                C003:'', //伤残等级 
                C004:'',//伤残证件名称
                C005:'',//伤残证件号码 
                C007:'',//是否因精神病评残
                C008:'',//立功受奖情况
                C009:'',//立功受奖证件
                C011:'',//伤残性质
                userID:this.$cookies.get('userID'),
                C009: [],//图片储存的地方
            },
            rules: {  //规则
                C001:[  //现就业状况
                    { required: true, message: '请填写身体残疾情况', trigger: 'change' },
                ],
                C002:[  //现就业状况
                    { required: true, message: '请填写否享受残疾人两项补贴', trigger: 'change' },
                ],
                C003:[  //伤残等级
                    { required: true, message: '请填写伤残等级', trigger: 'change' },
                ],
                C004:[  //伤残证件名称
                    { required: true, message: '请填写伤残证件名称 ', trigger: 'change' },
                ],
                C005:[  //伤残证件号码 
                    { required: true, message: '请填写伤残证件号码 ', trigger: 'blur' },
                ],
                C007:[  //是否因精神病评残
                    { required: true, message: '请选择是否因精神病评残', trigger: 'change' },
                ],
                C008:[  //立功受奖情况
                    { required: true, message: '请选择立功受奖情况', trigger: 'change' },
                ],
                C011:[  //是否因精神病评残
                    { required: true, message: '请填写是否因精神病评残', trigger: 'change' },
                ],
            },
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    console.log(this.ruleForm)

                    let postData = this.$qs.stringify(this.ruleForm);
                    console.log(postData)
                    // 伤残信息提交
                    this.$axios.post(this.HOST+interface_s.lg,postData,{
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded', 
                        }
                    })
                    .then( (response) => {
                        if(response.data.code==0){
                            this.$alert('填写成功！', '消息', {
                                confirmButtonText: '确定',
                                callback: action => {
                                    this.$emit('submitfn',4)
                                }
                            })
                        }else{
                            this.$alert('信息填写错误或网络错误', '消息', {
                                confirmButtonText: '确定',
                                callback: action => {
                                   
                                }
                            })
                        }
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //上传
        beforeupload (file) {  //上传之前阻挡
            // this.formData.append('file', file)
            console.log(file)
            // return false
        },
        //删除图片
        handleRemove(file, fileList) {
            console.log(file);
            console.log(fileList)
        },
        //图片预览--点击大图时的操作
        handlePictureCardPreview(file) {
            console.log(file.url)
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        //图片上传成功
        imgSuccess(response, file, fileList){
            console.log(response)
            console.log(file)
            console.log(fileList)
        },
        //用户点击上一层时
        fallbackFn(){
            this.$confirm('您确定返回上一层吗？如果反回此处得重新填写', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$emit('submitfn',2)
            }).catch(() => {
                //取消
            });
        }
    },
    components:{
        
    }
}
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
}
.el-row:last-child {
    margin-bottom: 0;
}
</style>